<template>
  <div class="layout">
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="280px" class="sidebar">
        <div class="logo">
          <div class="logo-icon">
            <el-icon size="32"><FolderOpened /></el-icon>
          </div>
          <div class="logo-text">
            <h3 class="text-gradient">文件管理系统</h3>
            <p class="logo-subtitle">File Management</p>
          </div>
        </div>
        
        <nav class="sidebar-nav">
          <div class="nav-section">
            <div class="nav-section-title">主要功能</div>
            <div class="nav-items">
              <router-link 
                to="/files" 
                class="nav-item"
                :class="{ active: $route.path === '/files' }"
              >
                <div class="nav-item-icon">
                  <el-icon><Folder /></el-icon>
                </div>
                <span class="nav-item-text">文件管理</span>
                <div class="nav-item-indicator"></div>
              </router-link>
              
              <router-link 
                to="/shared" 
                class="nav-item"
                :class="{ active: $route.path === '/shared' }"
              >
                <div class="nav-item-icon">
                  <el-icon><Share /></el-icon>
                </div>
                <span class="nav-item-text">共享文件</span>
                <div class="nav-item-indicator"></div>
              </router-link>
            </div>
          </div>
          
          <div v-if="authStore.user?.role === 'admin'" class="nav-section">
            <div class="nav-section-title">系统管理</div>
            <div class="nav-items">
              <router-link 
                to="/users" 
                class="nav-item"
                :class="{ active: $route.path === '/users' }"
              >
                <div class="nav-item-icon">
                  <el-icon><User /></el-icon>
                </div>
                <span class="nav-item-text">用户管理</span>
                <div class="nav-item-indicator"></div>
              </router-link>
              
              <router-link 
                to="/departments" 
                class="nav-item"
                :class="{ active: $route.path === '/departments' }"
              >
                <div class="nav-item-icon">
                  <el-icon><OfficeBuilding /></el-icon>
                </div>
                <span class="nav-item-text">部门管理</span>
                <div class="nav-item-indicator"></div>
              </router-link>
            </div>
          </div>
        </nav>
        
        <div class="sidebar-footer">
          <div class="user-card">
            <div class="user-avatar">
              <el-icon><Avatar /></el-icon>
            </div>
            <div class="user-info">
              <div class="user-name">{{ authStore.user?.full_name }}</div>
              <div class="user-role">{{ getRoleText(authStore.user?.role) }}</div>
            </div>
          </div>
        </div>
      </el-aside>
      
      <!-- 主内容区 -->
      <el-container>
        <!-- 顶部导航 -->
        <el-header class="header">
          <div class="header-left">
            <div class="breadcrumb-container">
              <h1 class="page-title">{{ getPageTitle() }}</h1>
              <p class="page-subtitle">{{ getPageSubtitle() }}</p>
            </div>
          </div>
          
          <div class="header-right">
            <div class="header-actions">
              <el-button circle class="action-btn">
                <el-icon><Bell /></el-icon>
              </el-button>
              
              <el-button circle class="action-btn">
                <el-icon><Setting /></el-icon>
              </el-button>
              
              <el-dropdown @command="handleCommand" class="user-dropdown">
                <div class="user-trigger">
                  <div class="user-avatar-small">
                    <el-icon><Avatar /></el-icon>
                  </div>
                  <el-icon class="dropdown-arrow"><ArrowDown /></el-icon>
                </div>
                <template #dropdown>
                  <el-dropdown-menu class="user-dropdown-menu">
                    <el-dropdown-item command="profile" class="dropdown-item">
                      <el-icon><User /></el-icon>
                      个人信息
                    </el-dropdown-item>
                    <el-dropdown-item command="settings" class="dropdown-item">
                      <el-icon><Setting /></el-icon>
                      设置
                    </el-dropdown-item>
                    <el-dropdown-item command="logout" divided class="dropdown-item logout">
                      <el-icon><SwitchButton /></el-icon>
                      退出登录
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </el-header>
        
        <!-- 主内容 -->
        <el-main class="main-content">
          <div class="content-wrapper">
            <transition name="fade" mode="out-in">
              <router-view />
            </transition>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useAuthStore } from '@/stores/auth'
import { 
  FolderOpened, 
  Folder, 
  Share, 
  User, 
  OfficeBuilding, 
  Avatar, 
  Bell, 
  Setting, 
  ArrowDown,
  SwitchButton
} from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()
const authStore = useAuthStore()

const getPageTitle = () => {
  const titleMap = {
    '/files': '文件管理',
    '/shared': '共享文件',
    '/users': '用户管理',
    '/departments': '部门管理'
  }
  return titleMap[route.path] || '文件管理系统'
}

const getPageSubtitle = () => {
  const subtitleMap = {
    '/files': '管理您的文件和文件夹',
    '/shared': '查看和管理共享文件',
    '/users': '管理系统用户',
    '/departments': '管理部门信息'
  }
  return subtitleMap[route.path] || '欢迎使用文件管理系统'
}

const getRoleText = (role) => {
  const roleMap = {
    'admin': '系统管理员',
    'manager': '部门经理',
    'user': '普通用户'
  }
  return roleMap[role] || '用户'
}

const handleCommand = async (command) => {
  switch (command) {
    case 'profile':
      ElMessage.info('个人信息功能开发中...')
      break
    case 'settings':
      ElMessage.info('设置功能开发中...')
      break
    case 'logout':
      try {
        await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        authStore.logout()
        router.push('/login')
        ElMessage.success('已退出登录')
      } catch {
        // 用户取消
      }
      break
  }
}
</script>

<style scoped>
.layout {
  height: 100vh;
  background: var(--bg-secondary);
}

/* 侧边栏样式 */
.sidebar {
  background: var(--bg-sidebar);
  color: var(--text-inverse);
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 10;
}

.logo {
  padding: var(--spacing-xl);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: var(--spacing-lg);
}

.logo-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: var(--shadow-md);
}

.logo-text h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}

.logo-subtitle {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin: 0;
  font-weight: 400;
}

/* 导航样式 */
.sidebar-nav {
  padding: 0 var(--spacing-lg);
  flex: 1;
}

.nav-section {
  margin-bottom: var(--spacing-xl);
}

.nav-section-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-md);
  padding: 0 var(--spacing-md);
}

.nav-items {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.nav-item {
  display: flex;
  align-items: center;
  padding: var(--spacing-md);
  border-radius: var(--radius-lg);
  color: var(--text-tertiary);
  text-decoration: none;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-inverse);
  transform: translateX(4px);
}

.nav-item.active {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
  color: var(--text-inverse);
  box-shadow: var(--shadow-md);
}

.nav-item.active .nav-item-indicator {
  opacity: 1;
  transform: scaleY(1);
}

.nav-item-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--spacing-md);
}

.nav-item-text {
  font-weight: 500;
  font-size: 0.875rem;
}

.nav-item-indicator {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 20px;
  background: var(--text-inverse);
  border-radius: 0 2px 2px 0;
  opacity: 0;
  transition: all var(--transition-normal);
}

/* 侧边栏底部 */
.sidebar-footer {
  padding: var(--spacing-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.user-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-lg);
  transition: all var(--transition-normal);
}

.user-card:hover {
  background: rgba(255, 255, 255, 0.1);
}

.user-avatar {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.25rem;
}

.user-info {
  flex: 1;
  min-width: 0;
}

.user-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-inverse);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 头部样式 */
.header {
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--spacing-xl);
  box-shadow: var(--shadow-sm);
  position: relative;
  z-index: 5;
}

.breadcrumb-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
}

.page-subtitle {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin: 0;
  font-weight: 400;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.action-btn {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-light);
  background: var(--bg-primary);
  color: var(--text-secondary);
  transition: all var(--transition-normal);
}

.action-btn:hover {
  background: var(--bg-tertiary);
  color: var(--primary-color);
  border-color: var(--primary-color);
  transform: translateY(-1px);
}

.user-dropdown {
  cursor: pointer;
}

.user-trigger {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-lg);
  transition: all var(--transition-normal);
}

.user-trigger:hover {
  background: var(--bg-tertiary);
}

.user-avatar-small {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1rem;
}

.dropdown-arrow {
  color: var(--text-secondary);
  transition: transform var(--transition-normal);
}

.user-dropdown:hover .dropdown-arrow {
  transform: rotate(180deg);
}

/* 主内容区样式 */
.main-content {
  background: var(--bg-secondary);
  padding: 0;
  overflow: hidden;
}

.content-wrapper {
  height: 100%;
  padding: var(--spacing-xl);
  overflow-y: auto;
}

/* 下拉菜单样式 */
:deep(.user-dropdown-menu) {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--spacing-sm);
  background: var(--bg-primary);
}

:deep(.dropdown-item) {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  transition: all var(--transition-normal);
  color: var(--text-primary);
}

:deep(.dropdown-item:hover) {
  background: var(--bg-tertiary);
  color: var(--primary-color);
}

:deep(.dropdown-item.logout) {
  color: var(--danger-color);
}

:deep(.dropdown-item.logout:hover) {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger-color);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .sidebar {
    width: 60px !important;
  }
  
  .logo-text,
  .nav-item-text,
  .nav-section-title,
  .user-info {
    display: none;
  }
  
  .logo {
    justify-content: center;
  }
  
  .nav-item {
    justify-content: center;
  }
  
  .user-card {
    justify-content: center;
  }
}
</style>